<html><head>
<meta charset="utf-8">
<title>线上系统排列原型0.1</title>

<link type="text/css" rel="stylesheet" href="styles/default.css" media="screen">
<link rel="stylesheet" href="styles/style1.css">

</head>
<body>
<style>
    .video_img{
        width: 11rem;
        height: 11rem;
    }
    .video_li{
        border-radius: 11rem;
    }
</style>
<div id="container" style="z-index: 999;">
	
	
	<ul id="images">
		<li class="ui-draggable video_li" style="position: absolute; left: 286.262px; top: 200.585px;"><div>
			<a href="#"><img alt="3dOcean" class="video_img" src="images/thumbnails/image1.gif"></a>
		</div></li>
		<li class="ui-draggable video_li" style="position: absolute; left: 332.103px; top: 214.334px;"><div>
			<a href="#"><img alt="AudioJungle" class="video_img" src="images/thumbnails/image2.gif"></a>
		</div></li>
		<li class="ui-draggable video_li" style="position: absolute; left: 188.581px; top: 247.118px;"><div>
		<a href="#"><img alt="ActiveDen" class="video_img" src="images/thumbnails/image3.gif"></a>
		</div></li>
		<li class="ui-draggable video_li" style="position: absolute; left: 270.828px; top: 304.642px;"><div>
			<a href="#"><img alt="GraphicRiver" class="video_img" src="images/thumbnails/image4.gif"></a>
		</div></li>
		<li class="ui-draggable video_li" style="position: absolute; left: 213.155px; top: 276.176px;"><div>
			<a href="#"><img alt="ThemeForest" class="video_img" src="images/thumbnails/image5.gif"></a>
		</div></li>
		<li class="ui-draggable video_li" style="position: absolute; left: 223.707px; top: 167.507px;"><div>
			<a href="#"><img alt="VideoHive" class="video_img" src="images/thumbnails/image6.gif"></a>
		</div></li>
	<!-- <li id="instructions" class="ui-draggable" style="position: absolute; left: 217.933px; top: 266.882px;"><h4>支持拖动图片效果；如果你看到你喜欢的，点击它！</h4></li></ul> -->
	
</div>
<!--  -->
<canvas id="canvas" width="769" height="625"></canvas>
    
<!-- <div class="instructions">点击网页查看效果</div> -->

<script src="js/script1.js"></script>
<!--  -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jqueryui-core-drag.js"></script>
<script type="text/javascript">		
//*	
var imgs;
	
$(document).ready(function () {
var drag = {};
	$('h1').remove();
	//$('#images').append('<li id="instructions"><h4>支持拖动图片效果；如果你看到你喜欢的，点击它！</h4></li>');
	
	imgs = $("#images li");

	imgs.draggable({ 
		stack : { group : '#images li', min : 1},
		start : function () {
			$this = $(this);
			if($this.attr('id') === 'instructions') { $this.fadeOut().remove(); }
			
			imgs.each(function () {
				var $this = $(this);
				// if($this.width() !== 256) {
				// 	$this.stop().animate({width : 100 }).removeClass('top');
				// }
			});
			
			drag.startTime = new Date();
			drag.startPos = $this.position();
		},
		stop : function () {
			var $this = $(this), top, left, time;
			drag.endTime = new Date();
			drag.endPos = $this.position();
			drag.leftOffset = drag.endPos.left - drag.startPos.left;
			drag.topOffset  = drag.endPos.top  - drag.startPos.top;

			time = (drag.endTime.getTime() - drag.startTime.getTime()) /60;
			
			top  = (drag.topOffset / time).toString();
			left = (drag.leftOffset / time).toString();
			
			$this.animate({
				top : '+=' + top, 
				left: '+=' + left 
			});
		}
	});

	imgs.click(function () {
		var $this = $(this);
	
		if ($this.attr('id') == 'instructions') {
			$this.fadeOut().remove();
		}
		else {
			if($this.width() !== 256) {
				$this.stop().animate({width : 256 }).removeClass('top');
			}
			else {
				if (!($this.find('.info').length)) {
					$.ajax({
						url : $this.find('a').attr('href'),
						dataType : 'html',
						success : function (data) {
							var $d = $(data),
								head = $d.filter('h1'),
								para = $d.filter('p');
								
							$this.children('div').append('<div class="info"></div>').find(".info").append(head, para);
						},
						error : function () {
							var msg = '<h1>Oops!</h1><p>It looks like there been a problem; we can\'t get this info right now.</p>';
							$this.children('div').append('<div class="info"></div>').find(".info").html(msg);
						}
					});
				}
				$this.css({'zIndex' :8 })
						 .stop()
						 .animate({ width : 512})
						 .addClass('top')
							.siblings().removeClass('top')
									   .stop()
									   .animate({width : 256})
											.filter(function () { return $(this).css('zIndex') >= '8' }).css({'zIndex' : 7});
			}
		}
		return false;
	});
	
});

$(window).load(function () {
$w = $(window);
imgs.css({
		position : 'absolute',
		//left : $w.width() / 2 - imgs.width(),
		left:0,
		top  : $w.height() / 2- imgs.height()
	});
var point=0;
for(var i = 0; imgs[i]; i++ ) {
	$(imgs[i]).animate({
			//left : '+=' + Math.random()*550,
			left : '+=' +point,
			//top  : '+=' + Math.random()*150
			top  : 150,

		});
	point+=200;
}
});//*/
</script>



</body></html>